<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/head :: head"/>
<body>

<div th:replace="fragments/navbar :: navbar"/>

<section class="hero is-fullheight-with-navbar is-primary is-bold">

    <section class="hero-body columns is-centered  m-0">
        <div class="column is-half has-text-centered">
            <div th:replace="fragments/notification :: notification"/>
            <div th:each="object: ${objects}" class="card m-4">
                <div class="card-content">
                    <div class="media">
                        <div class="media-content">
                            <p class="title is-4 has-text-dark" th:text="${object.name}"/>
                            <p class="subtitle is-6 has-text-grey-light mb-1" th:text="${object.key}"/>
                            <p th:if="${object.isPublic}" class="subtitle is-6 has-text-grey-light">
                                Publicly accessible
                            </p>
                            <p th:unless="${object.isPublic}" class="subtitle is-6 has-text-grey-light">Private</p>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <a th:href="${object.url}" target="_blank"
                       class="card-footer-item has-text-info">
                        <span class="icon is-small pr-3">
                            <i class="fas fa-download"></i>
                        </span>
                        <span>Download</span>
                    </a>
                    <a th:if="${object.isPublic}" th:href="@{~/space/__${space}__/make-private/__${object.key}__}"
                       class="card-footer-item has-text-info">
                    <span class="icon is-small pr-3">
                            <i class="fas fa-eye-slash"></i>
                        </span>
                        <span>Make Private</span>
                    </a>
                    <a th:unless="${object.isPublic}" th:href="@{~/space/__${space}__/make-public/__${object.key}__}"
                       class="card-footer-item has-text-info">
                    <span class="icon is-small pr-3">
                            <i class="fas fa-eye"></i>
                        </span>
                        <span>Make Public</span>
                    </a>
                    <a th:href="@{~/space/__${space}__/magic/__${object.key}__}"
                       class="card-footer-item has-text-info">
                        <span class="icon is-small pr-3">
                            <i class="fas fa-magic"></i>
                        </span>
                        <span>Magic Link</span>
                    </a>
                    <a th:href="@{~/space/__${space}__/delete/__${object.key}__}"
                       class="card-footer-item has-text-danger">
                        <span class="icon is-small pr-3">
                            <i class="fas fa-trash-alt"></i>
                        </span>
                        <span>Delete</span>
                    </a>

                </div>
            </div>
            <button class="button is-medium is-primary is-inverted is-outlined ">
                <a th:href="@{~/space/__${space}__/object-form}">
                <span class="icon is-small">
                   <i class="fas fa-upload"></i>
                </span>
                    <span>Upload File</span>
                </a>
            </button>
        </div>
    </section>
</section>

<script th:replace="fragments/notification :: script"/>

</body>
</html>
